<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 500px;
				height: 300px;
				background: darkred;
			}
			.box .top{
				width: 100%;
				height: 40px;
				font-size: 20px;
				font-weight: 900;
				text-align: center;
				line-height: 40px;
				background: #ccc;
				
			}
			.box .bottom{
				width: 100%;
				height: 260px;
				background: #C4D5DF;
			}
			.box .bottom p{
				margin-left: 100px;
			}
			.box .bottom input{
				width: 200px;
				height: 30px;
				margin: 20px;
				margin-left: 10px;
				
				
			}
			.box .bottom #sut{
				width: 100px;
				height: 40px;
				margin-left: 200px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="top">
				网站登录
			</div>
			<div class="bottom">
				<p>账号：<input type="text" name="" id="" value="" /></p>
				<p>密码：<input type="password" /></p>
				<input type="submit" id="sut" name="登录" />
			</div>
		</div>
	</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        $(".box").bind("mousedown",function (e) {
            var disX = e.clientX - $(this).offset().left;
            var disY = e.clientY - $(this).offset().top;
            $(document).bind("mousemove",function (e) {
                var l = e.clientX - disX;
                var t = e.clientY - disY;
                if(l < 0){
                    l = 0;
                }
                if(l > $(window).width() - $(".box").outerWidth()){
                    l = $(window).width() - $(".box").outerWidth();
                }
                if(t > $(window).height() - $(".box").outerHeight()){
                    t = $(window).height() - $(".box").outerHeight()
                }
                if(t < 0){
                    t = 0;
                }
                $(".box").css({
                    left : l,
                    top : t
                })
            })
            $(document).bind("mouseup",function () {
                $(document).unbind("mousemove");
                $(document).unbind("mouseup");
            })

            return false;
        })

    })
</script>